<template>
  <div>
    <head-container></head-container>
    <section class="news_main">
      <p class="pos">
        当前位置:
        <router-link to="/" tag="span">首页</router-link>>
        <router-link to="/news" tag="span">睿那新闻</router-link>>
        <span>{{info.title}}</span>
      </p>
      <div class="banner_wrap">
        <img :src="info.banner_url" alt="">
      </div>
      <h2>{{info.title}}</h2>
      <div class="author_wrap">
        <div class="author">发布人<span>{{info.updated_by?info.updated_by:
          info.created_by?info.created_by:'默认'}}</span>
        </div>
        <div class="timer">时间<span>
          {{info.updated_at?GLOBAL.timestampToTime(info.updated_at):
          info.created_at?GLOBAL.timestampToTime(info.created_at):'默认'}}</span>
        </div>
      </div>
      <section class="detail" v-html="info.content"></section>
    </section>
    <foot-container></foot-container>
  </div>
</template>
<script>
import headContainer from '../components/headContainer'
import footContainer from '../components/footContainer'
export default {
  name:"NewsItem",
  data(){
    return{
      id:this.$route.query.id,
      info:{}
    }
  },
  components:{
    headContainer,
    footContainer
  },
  mounted(){
    if (!this.id){
      this.$router.push('/news')
    }
    this.GLOBAL.request({
      baseURL:this.GLOBAL.API_RNTY_URL,
      url:'trends/detail',
      param:{
        id:this.id
      }
    }).then(({data:data})=>{
      this.info = data;
    })
  }
}
</script>
<style scoped>
.news_main{
  padding-top:116px;
  min-height:696px;
}
.banner_wrap img{
  width:100%;
  height:500px;
}
.pos{
  margin:10px 0 10px 5px;
}
.pos span{
  cursor: pointer;
}
.news_main{
  padding-top:116px;
  width:1200px;
  margin:0 auto;
}
.news_main h2{
  text-align: center;
  line-height: 50px;
}
.author_wrap{
  text-align: center;
}
.author_wrap div{
  display: inline-block;
  margin-right:50px;
  position: relative;
  padding-left:20px;
}
.author_wrap div::after{
  position: absolute;
  top:2px;
  left:0;
}
.author_wrap .author::after{
  content: url('../assets/images/author.png')
}
.author_wrap .timer::after{
  content: url('../assets/images/timer.png')
}
.author_wrap span{
  color:#adadad;
  margin: 0 10px;
  font:14px/16px "微软雅黑";
}
</style>

